<template>
  <el-dialog
      v-model="fixDetailWinDialogVisible"
      title="类型详情"
      width="60%"
      @close="handleClose"
      draggable
      center
  >
    <template #default>
      <el-descriptions>
        <el-descriptions-item label="设备编码">{{ fix.fixEncode }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ fix.fixName }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag type="success" v-if="fix.fixStatus == 1">在库</el-tag>
          <el-tag type="success" v-else-if="fix.fixStatus == 2">被领用</el-tag>
          <el-tag type="success" v-else-if="fix.fixStatus == 3">报废</el-tag>
          <el-tag type="success" v-else-if="fix.fixStatus == 4">维修中</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="保养周期">{{fix.fixFrequency}}</el-descriptions-item>
        <el-descriptions-item label="保养维护类型">
          <el-tag type="primary" v-if="fix.fixType == 1">定期维护</el-tag>
          <el-tag type="success" v-else-if="fix.fixType == 2">按使用次数维护</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          <div v-html="fix.fixRemark"></div>
        </el-descriptions-item>
      </el-descriptions>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, watch} from "vue";
import fixRequest from "@/api/fix.js";

// 申明组件的属性
const props = defineProps(['fixId']);
const emits = defineEmits(['cancelDetail'])
let fixDetailWinDialogVisible = ref(false);
// 详情对象
let fix = ref({})

function handleClose(){
  emits("cancelDetail");
}
function loadFixById() {
  fixRequest.selectById(props.fixId, res => {
    if (res.data) {
      fix.value = res.data;
      fixDetailWinDialogVisible.value = true;
    }
  });
}

// 属性侦听
watch(() => props.fixId, () => {
  loadFixById();
});
</script>

<style scoped>

</style>